<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="480"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '18px sans-serif';

        // --- Draw Bench ---
        const benchTopY = 200;
        const benchThickness = 20;
        ctx.beginPath();
        ctx.moveTo(80, benchTopY);
        ctx.lineTo(80, benchTopY - benchThickness);
        ctx.lineTo(520, benchTopY - benchThickness);
        // Jagged edge for broken view
        ctx.lineTo(515, benchTopY - benchThickness + 5);
        ctx.lineTo(525, benchTopY - benchThickness + 10);
        ctx.lineTo(520, benchTopY - benchThickness + 15);
        // Bottom of the bench top part
        ctx.moveTo(520, benchTopY);
        ctx.lineTo(80, benchTopY);
        // Legs
        ctx.moveTo(120, benchTopY);
        ctx.lineTo(120, 320);
        ctx.moveTo(420, benchTopY);
        ctx.lineTo(420, 320);
        ctx.stroke();
        ctx.fillText("bench", 530, 215);

        // --- Draw 2.0 kg object ---
        const blockH = 50;
        const blockW = 120;
        const blockX = 280;
        const blockY = benchTopY - benchThickness - blockH; // Sits on the bench
        ctx.strokeRect(blockX, blockY, blockW, blockH);
        ctx.fillText("2.0 kg object", 410, 155);

        // --- Draw Card ---
        const cardH = 30;
        const cardW = 10;
        const cardX = blockX + blockW / 2 - cardW / 2;
        const cardY = blockY - cardH;
        ctx.strokeRect(cardX, cardY, cardW, cardH);
        ctx.fillText("card", 345, 90);

        // --- Draw Card Dimension ---
        const dimY = 100;
        ctx.beginPath();
        // Dimension line
        ctx.moveTo(cardX, dimY);
        ctx.lineTo(cardX + cardW, dimY);
        // Ticks
        ctx.moveTo(cardX, dimY - 4);
        ctx.lineTo(cardX, dimY + 4);
        ctx.moveTo(cardX + cardW, dimY - 4);
        ctx.lineTo(cardX + cardW, dimY + 4);
        ctx.stroke();
        ctx.fillText("2.0 cm", cardX - 30, 105);

        // --- Draw Pulley ---
        const pulleyR = 15;
        const cordY = blockY + blockH / 2;
        const pulleyX = 80 + pulleyR; // Place it at the edge of the bench
        const pulleyY = cordY + pulleyR;
        ctx.beginPath();
        ctx.arc(pulleyX, pulleyY, pulleyR, 0, 2 * Math.PI);
        // Pulley mount
        ctx.moveTo(pulleyX, pulleyY + pulleyR);
        ctx.lineTo(pulleyX, benchTopY - benchThickness);
        ctx.moveTo(pulleyX, pulleyY);
        ctx.lineTo(pulleyX - 10, pulleyY + 10);
        ctx.stroke();
        ctx.fillText("pulley", 120, 160);


        // --- Draw Cord ---
        const hangingMassTopY = 280;
        ctx.beginPath();
        // Horizontal part
        ctx.moveTo(blockX, cordY);
        ctx.lineTo(pulleyX, cordY);
        // Arc over pulley
        ctx.arc(pulleyX, pulleyY, pulleyR, -Math.PI / 2, 0);
        // Vertical part
        const verticalCordX = pulleyX + pulleyR;
        ctx.lineTo(verticalCordX, hangingMassTopY);
        ctx.stroke();
        ctx.fillText("cord", 180, 170);

        // --- Draw 3.0 kg object (hanging) ---
        const hangingMassW = 50;
        const hangingMassH = 60;
        const hangingMassX = verticalCordX - hangingMassW / 2;
        ctx.strokeRect(hangingMassX, hangingMassTopY, hangingMassW, hangingMassH);
        ctx.textAlign = 'center';
        ctx.fillText("3.0 kg object", hangingMassX + hangingMassW/2, hangingMassTopY + hangingMassH + 25);
        ctx.textAlign = 'start'; // Reset alignment

        // --- Draw Force F ---
        const forceArrowY1 = hangingMassTopY - 15;
        const forceArrowY2 = hangingMassTopY - 45;
        ctx.beginPath();
        ctx.moveTo(verticalCordX, forceArrowY1);
        ctx.lineTo(verticalCordX, forceArrowY2);
        // Arrowhead
        ctx.moveTo(verticalCordX, forceArrowY2);
        ctx.lineTo(verticalCordX - 5, forceArrowY2 + 8);
        ctx.moveTo(verticalCordX, forceArrowY2);
        ctx.lineTo(verticalCordX + 5, forceArrowY2 + 8);
        ctx.stroke();
        ctx.fillText("F", verticalCordX - 25, (forceArrowY1 + forceArrowY2) / 2 + 5);

        // --- Draw Figure Caption ---
        ctx.font = 'bold 18px sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText("Fig. 2.1", canvas.width / 2, 450);
    </script>
</body>
</html>